<template>
  <ul class="menu-root">
    <li v-for="(item,index) in list " :key="index">
      <div :class="wikiId===item.id?' title_current title  title__'+item.level:' title '+'  title__'+item.level" @click="to(item)">
        {{item.name}}
      </div>
      <tree-menus :projectId="projectId" :list="item.children" @childTo="to" v-if="item.children&&item.children.length>0"></tree-menus>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'treeMenus',
    props: {
      list: Array,
      projectId: String
    },

    data () {
      return {
        wikiId: ''
      }
    },
    methods: {
      to (item) {
        this.$emit('childTo', item)
        this.$emit('viewWiki', item)
      },
      watchRoute () {
        this.wikiId = this.$ala.urlQuery('wikiId')
      }
    },
    watch: {
      '$route': 'watchRoute'
    }
  }
</script>
  <style lang="scss" scoped >
  .menu-root {
    list-style-type: none;
    margin: 0;
    margin-left: 18px;
    line-height: 1.6em;
    li {
      margin-top: 0.57em;
      line-height: 26px;

      display: list-item;
      .title {
        text-decoration: none;
        color: #304455;
        cursor: pointer;
        font-size: 16px;
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
      }
      .title_current {
        // font-weight: 600;
        color: #42b983;
        // text-decoration: none;
        // cursor: pointer;
        // font-size: 16px;
        // font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
      }
      .title__1 {
        font-weight: 600;
      }
      .title__1,
      .title__2,
      .title__3,
      .title__4,
      .title__5,
      .title__6 {
        font-size: 1.4rem;
        color: #0f7153;
      }

      .title__1:hover,
      .title__2:hover,
      .title__3:hover,
      .title__4:hover,
      .title__5:hover,
      .title__6:hover {
        font-size: 1.4rem;
        text-decoration: underline;
        color: #ff4400;
      }
      .title__1:before {
        content: "●";
        font-size: 10px;
      }
      .title__2:before {
        content: "○";
        font-size: 12px;
      }
      .title__3:before {
        content: "■";
        font-size: 10px;
      }
      .title__4:before {
        content: "♢";
        font-size: 10px;
      }
    }
  }
</style>

